<template>
  <el-card class="custom-card">
    <!-- 卡片顶部区域 -->
    <div class="flex flex-col">

      <!-- 大标题 -->
      <h1 class="contact-title">
        科研成果
      </h1>

      <div class="custom-double-divider">
        <el-divider class="title-divider" />
      </div>

      <!-- 发表论文部分 -->
      <div class="section">
        <h2 class="section-title">发表论文</h2>
        <ol class="paper-list">
          <li class="paper-item">
            Chi L, Liu T, Hua Z et al. Genome sequencing highlights the fungal sclerotium formation of medicinal fungi Polyporus umbellatus. BMC Genom Data 26, 17 (2025). <a href="https://doi.org/10.1186/s12863-025-01311-8" target="_blank" class="doi-link">https://doi.org/10.1186/s12863-025-01311-8</a>
          </li>
          <li class="paper-item">
            Zhang Y, Liu T, Nan T, Hua Z, Zhao Y, Yuan Y. Characteristics and functions of volatile organic compounds in the tripartite symbiotic system of Gastrodia elata-Armillaria gallica-Rahnella aceris HPDA25. Plant Signal Behav. 2024 Dec 31;19(1):2399426. doi: <a href="https://doi.org/10.1080/15592324.2024.2399426" target="_blank" class="doi-link">10.1080/15592324.2024.2399426</a>.
          </li>
          <li class="paper-item">
            Liu T, Cheng R, Hua Z, et al. Identification of Growth-Promoting Bacterial Resources by Investigating the Microbial Community Composition of Polyporus umbellatus Sclerotia. Journal of Fungi. 2024; 10(6):386. <a href="https://doi.org/10.3390/jof10060386" target="_blank" class="doi-link">https://doi.org/10.3390/jof10060386</a>.
          </li>
          <li class="paper-item">
            Liu T, Hua Z, Han P, et al. Mycorrhizosphere Bacteria, Rahnella sp. HPDA25, Promotes the Growth of Armillaria gallica and Its Parasitic Host Gastrodia elata. Front Microbiol, 2022;13:842893. <a href="https://doi.org/10.3389/fmicb.2022.842893" target="_blank" class="doi-link">https://doi.org/10.3389/fmicb.2022.842893</a>.
          </li>
          <li class="paper-item">
            Han P, Liu T, Zheng Y, et al. A Mycorrhizal Bacteria Strain Isolated From Polyporus umbellatus Exhibits Broad-Spectrum Antifungal Activity. Front Plant Sci. 2022;13:954160. <a href="https://doi.org/10.3389/fpls.2022.954160" target="_blank" class="doi-link">https://doi.org/10.3389/fpls.2022.954160</a>.
          </li>
          <li class="paper-item">
            Hua Z, Liu T, Han P, et al. Isolation, Genomic Characterization, and Mushroom Growth-promoting Effect of the First Fungus-derived Rhizobium. Front Microbiol. 2022;13:947687. <a href="https://doi.org/10.3389/fmicb.2022.947687" target="_blank" class="doi-link">https://doi.org/10.3389/fmicb.2022.947687</a>.
          </li>
        </ol>
      </div>

      <!-- 授权专利部分 -->
      <div class="section">
        <h2 class="section-title">授权专利</h2>
        <div class="patent-images">
          <el-image
              src="/microbe/result_image1.png"
              alt="专利图片1"
              class="patent-image"
          />
          <el-image
              src="/microbe/result_image2.png"
              alt="专利图片2"
              class="patent-image"
          />
          <el-image
              src="/microbe/result_image3.png"
              alt="专利图片3"
              class="patent-image"
          />
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
</script>

<style scoped>
/* 自定义卡片样式 */
.custom-card {
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  transition: all 0.3s ease;
  max-width: 900px;
  margin: 0 auto;
}

.custom-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 标题样式 */
.contact-title {
  font-size: 35px;
  font-weight: bold;
  color: #333;
  text-align: start;
  margin-bottom: 2rem;
}

/* 部分标题样式 */
.section {
  margin-bottom: 2.5rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

/* 论文列表样式 */
.paper-list {
  list-style-type: decimal;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.paper-item {
  color: #555;
  line-height: 1.6;
  text-align: justify;
}

.doi-link {
  color: #13675b;
  text-decoration: none;
  word-break: break-all;
}

.doi-link:hover {
  text-decoration: underline;
}

/* 专利图片样式 */
.patent-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.patent-image {
  width: 30%;
  min-width: 200px;
  height: auto;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .custom-card {
    padding: 1.5rem;
  }

  .contact-title {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.3rem;
  }

  .patent-images {
    flex-direction: column;
    align-items: center;
  }

  .patent-image {
    width: 80%;
    margin-bottom: 1rem;
  }
}

@media (max-width: 480px) {
  .paper-list {
    padding-left: 1.5rem;
  }

  .patent-image {
    width: 100%;
  }
}

.custom-double-divider {
  display: flex; /* 启用 Flex 布局 */
  width: 100%;  /* 确保占满父容器 */
  margin-bottom: 20px;
}

.title-divider {
  position: relative;
  border: none; /* 隐藏默认分隔线 */
  margin: 0;    /* 清除默认边距 */
  height: 1px;  /* 控制伪元素高度 */
}

/* 左侧 30% 的分隔线（绿色） */
.title-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
  height:4px; /* 粗细 */
  background: #13675b; /* 颜色 */
}

/* 右侧 70% 的分隔线（灰色） */
.title-divider::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 80%;
  height: 1px; /* 粗细 */
  background: #e5e7eb; /* 颜色 */
}

</style>